<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Hogeschool Van Amsterdam - Groups</title>
		<link rel="icon" href="../ressources/general/favicon.ico" />
		<link href="../css/a-font-face.css" rel="stylesheet" media="screen">
		<link href="../css/groups.css" rel="stylesheet" media="screen">
	</head>

	<body>

		<div id="top">
			<div id="top-left">
				HOGESCHOOL VAN AMSTERDAM
			</div>
			<nav id="colorNav">
				<ul>
					<li class="green">
						<a href="#" class="icon-home">GROUPS <span class="notif">(3)</span></a>
						<ul>
							<li><a href="groups.html">Student X add you in a new group</a></li>
							<li><a href="groups.html">Student Y settle a new deadline</a></li>
							<li><a href="groups.html">Student Z upload a new file</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
					<li class="green">
						<a href="#" class="icon-home">HOMEWORK <span class="notif">(4)</span></a>
						<ul>
							<li><a href="homework.html">You have 1 new homework in Entrepreneurship</a></li>
							<li><a href="homework.html">You have 1 new homework in Personal Leadership</a></li>
							<li><a href="homework.html">You have 3 new homework in International Money & Finance</a></li>
							<li><a href="homework.html">You have 2 new homework in Debating in English</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
					<li class="green">
						<a href="#" class="icon-home">MESSAGES <span class="notif">(2)</span></a>
						<ul>
							<li><a href="messages.html">Student X send you a message</a></li>
							<li><a href="messages.html">Student Y send you a message</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
					<li class="green">
						<a href="#" class="icon-home">OTHERS <span class="notif">(2)</span></a>
						<ul>
							<li><a href="#">Teacher A is absent today</a></li>
							<li><a href="calendar_week.html">Schedule modification for your Financial Trade course</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
					<li class="green">
						<a href="#" class="icon-home">Student X</a>
						<ul>
							<li><a href="#">My profile</a></li>
							<li><a href="#">My marks</a></li>
							<li><a href="../index.html">Disconnect</a></li>
							<!-- More dropdown options -->
						</ul>
					</li>
				</ul>
			</nav>
		</div>

		<div id="page">

			<div id="header">
				<ul id="menu">
					<a href="home.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_home">
								HOME
							</div>
						</li>
					</a>
					<a href="calendar.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_calendar">
								CALENDAR
							</div>
						</li>
					</a>
					<a href="homework.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_homework">
								HOMEWORK
							</div>
						</li>
					</a>
					<a href="files.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_files">
								FILES
							</div>
						</li>
					</a>
					<a href="groups.html">
						<li class="list_menu">
							<div class="list_menu_active" id="list_menu_groups">
								GROUPS
							</div>
						</li>
					</a>
					<a href="messages.html">
						<li class="list_menu">
							<div class="list_menu_container" id="list_menu_messages">
								MESSAGES
							</div>
						</li>
					</a>
				</ul>
			</div>

			<div id="options">
				<div id="options_left">
					<a href="groups/create_a_group.html" class="button">Create a group</a>
				</div>
				<div id="options_right">
				</div>
			</div>

			<div id="files">

				<div class="course">
					<div class="course_left">
						<div class="icon">
							G1
						</div>
						<div class="progression">
						</div>
					</div>
					<div class="course_right">
						<div class="course_content">
								<h2>ENTREPRENEURSHIP</h2>
								<h1>Groupe n°1</h1>
								<hr>
								<div class="infos">
									<img class="icon_infos" src="../ressources/groups/user.png"/>
									<span class="infos_items">4 Members</span>
									<img class="icon_infos" src="../ressources/groups/files.png"/>
									<span class="infos_items">12 Files</span>
									<img class="icon_infos" src="../ressources/groups/homework.png"/>
									<span class="infos_items">2 Deadlines</span>
								</div>
								<p class="description">Maecenas imperdiet porttitor arcu, eu fringilla nisi tincidunt et. Duis augue tellus, sodales at pretium et, tempus a velit. Nam aliquam hendrerit dui a congue.</p>
								<a href="groups/group_1.html" class="button">Access group</a>
							</div>
					</div>
				</div>

				<div class="course">
					<div class="course_left">
						<div class="icon">
							G2
						</div>
						<div class="progression">
						</div>
					</div>
					<div class="course_right">
						<div class="course_content">
								<h2>MARKETING IN ACTION</h2>
								<h1>Groupe n°2</h1>
								<hr>
								<div class="infos">
									<img class="icon_infos" src="../ressources/groups/user.png"/>
									<span class="infos_items">4 Members</span>
									<img class="icon_infos" src="../ressources/groups/files.png"/>
									<span class="infos_items">12 Files</span>
									<img class="icon_infos" src="../ressources/groups/homework.png"/>
									<span class="infos_items">2 Deadlines</span>
								</div>
								<p class="description">Maecenas imperdiet porttitor arcu, eu fringilla nisi tincidunt et. Duis augue tellus, sodales at pretium et, tempus a velit. Nam aliquam hendrerit dui a congue.</p>
								<a href="groups/group_2.html" class="button">Access group</a>
							</div>
					</div>
				</div>

				<div class="course">
					<div class="course_left">
						<div class="icon">
							G3
						</div>
						<div class="progression">
						</div>
					</div>
					<div class="course_right">
						<div class="course_content">
								<h2>PERSONAL LEADERSHIP</h2>
								<h1>Groupe n°3</h1>
								<hr>
								<div class="infos">
									<img class="icon_infos" src="../ressources/groups/user.png"/>
									<span class="infos_items">4 Members</span>
									<img class="icon_infos" src="../ressources/groups/files.png"/>
									<span class="infos_items">12 Files</span>
									<img class="icon_infos" src="../ressources/groups/homework.png"/>
									<span class="infos_items">2 Deadlines</span>
								</div>
								<p class="description">Maecenas imperdiet porttitor arcu, eu fringilla nisi tincidunt et. Duis augue tellus, sodales at pretium et, tempus a velit. Nam aliquam hendrerit dui a congue.</p>
								<a href="groups/group_3.html" class="button">Access group</a>
							</div>
					</div>
				</div>

			</div>

		</div>

	</body>
</html>